<template>
	<div class="article-page">
		<div class="banner">
			<div class="container">
				<h1>{{article.title}}</h1>

				<article-meta :article="article"></article-meta>
			</div>
		</div>

		<div class="container page">
			<div class="row article-content">
				<div class="col-md-12" v-html="article.body">
				</div>
			</div>

			<hr />

			<div class="article-actions">
				<div class="article-meta">
					<a href="profile.html">
						<img src="http://i.imgur.com/Qr71crq.jpg" />
					</a>
					<div class="info">
						<a href class="author">Eric Simons</a>
						<span class="date">January 20th</span>
					</div>

					<button class="btn btn-sm btn-outline-secondary">
						<i class="ion-plus-round"></i>
						&nbsp;
						Follow Eric Simons
						<span class="counter">(10)</span>
					</button>
					&nbsp;
					<button class="btn btn-sm btn-outline-primary">
						<i class="ion-heart"></i>
						&nbsp;
						Favorite Post
						<span class="counter">(29)</span>
					</button>
				</div>
			</div>

			<article-comments :article="article"></article-comments>
		</div>
	</div>
</template>

<script>
import {articleInfo} from '@/api/article'
import MarkdownIt from 'markdown-it'
import articleMeta from './compontents/article-mate'
import ArticleComments from './compontents/article-comments'
export default {
    name:"articleIndex",
    components: {
        articleMeta,
        ArticleComments
    },
    async asyncData({params}){
        const {data} = await articleInfo(params.slug)
        const {article} = data
        article.body = new MarkdownIt().render(article.body)
        return {
            article
        }
    },
    head() {
      return {
        title: `${this.article.title} - Readworld`,
        meta: [
          // hid is used as unique identifier. Do not use `vmid` for it as it will not work
          {
            hid: 'description',
            name: 'description',
            content: this.article.description
          }
        ]
      }
    }
};
</script>

<style>
</style>